// src/components/login/LoginCard.tsx

import { useState, useEffect } from 'react';
import LoginHeader from '@/components/login/LoginHeader';
import LoginForm from '@/components/login/LoginForm';

const LoginCard = () => {
  const [isSmallScreen, setIsSmallScreen] = useState(false);
  const [isMediumScreen, setIsMediumScreen] = useState(false);

  useEffect(() => {
    const checkScreenSize = () => {
      const width = window.innerWidth;
      setIsSmallScreen(width < 640);
      setIsMediumScreen(width >= 640 && width < 768);
    };

    checkScreenSize();

    window.addEventListener('resize', checkScreenSize);

    return () => window.removeEventListener('resize', checkScreenSize);
  }, []);

  return (
    <section
      className={`bg-white rounded-3xl shadow-2xl w-full ${isSmallScreen
          ? 'p-6'
          : isMediumScreen
            ? 'p-8'
            : 'p-8'
        }`}
      aria-labelledby="login-header"
    >
      {/* Header section */}
      <LoginHeader />

      {/* Form section */}
      <LoginForm />

      {/* Footer section */}
      <div className="mt-8 pt-6 border-t border-gray-100">
        <p className="text-center text-sm text-gray-500">
          Don't have an account? Contact your administrator.
        </p>
      </div>
    </section>
  );
};

export default LoginCard;